<template>
    <div class="todo-item" :class="todo.completed ? 'completed' : ''">
        <input type="checkbox" :checked="todo.completed" @change="handleChange" />
        <!-- <input type="text" v-model.trim="content.todo" class="content" :class="todo.completed ? 'completed-content' : ''"> -->
        <!-- ------ 自定义v-model事件 v-model.trim="todo.content"  -->
        <label v-if="flag" class="content" :class="todo.completed ? 'completed-content' : 'uncompleted-content'"
            @dblclick="flag = !flag">{{ todo.content }}</label>
        <input v-else v-focus type="text" :value="todo.content" @keyup.enter="blurChange" @keyup.esc="todoEsc"
            @blur="todoChange" class="content" />
        <label class="created_time">{{ todo.created_time }}</label>

        <button @click="handleDelete"></button>
    </div>
</template>



<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue'
// 接收父组件传过来的对象
const data = defineProps({
    todo: {
        required: true,
        type: Object,
    },
})
// 把列表项传给todo
const todo = data.todo
// 设置双击变成input的变量
const flag = ref(true)
// 设置删除
// 传参数
const emit = defineEmits(['delete', 'toggle', 'contentChange'])
function handleDelete() {
    emit('delete', todo)
}
// 设置已完成
function handleChange() {
    emit('toggle', todo)
}
// 编辑待办事项
// 设置自定义指令自动聚焦
const vFocus = {
    mounted: (el) => el.focus()
}
// 回车离焦
function blurChange(e) {
    //监听enter让输入框离焦
    e.srcElement.blur(); // 让输入框主动失焦
}
// Esc离焦
function todoEsc(e) {
    // 点击esc让输入框离焦并把内容复原
    e.target.value = todo.content;
    e.srcElement.blur();
}
// 离焦提示父组件更改数据
function todoChange(e) {
    //监听离焦事件传id和内容
    // 触发自定义事件,传id和修改后得内容
    // 判断内容是否为空
    if (e.target.value == "") {
        // 若为空就删除待办
        emit("delete",todo);
        return
    }
    // 改变flag让其重新变为true
    flag.value = true;
    // 判断内容是否改变
    if (todo.content != e.target.value) {
        emit("contentChange", todo, e.target.value);
    } else {
        return;
    }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/todoitem.styl';
</style>